<template>
  <div>
    <!-- <el-button type="primary" :icon="Plus" @click="addRow">
      添加
    </el-button> -->
    <el-table :data="changeValues" style="width: 100%" height="250">
      <el-table-column v-for="items in columnChilds" :prop="items.field" :label="items.name">
        <template #default="scope">
          <div v-if="items.childs.length == 0">
            <SettingConfigInputInfo v-model:modelValues="scope.row[items.field]" :placeholder="'请设置' + items.name"
              :mode="items.mode" :type="items.type" :options="items.options" :desc="items.desc">
            </SettingConfigInputInfo>
          </div>
          <div v-if="items.childs.length > 0 && items.mode != 'list'">
            <SettingConfigInfo :datas="scope.row[items.field]" :struct="items.childs"></SettingConfigInfo>
          </div>
          <div v-if="items.childs.length > 0 && items.mode == 'list'">
            <SettingConfigTableInfo :datas="scope.row[items.field]" :struct="items.childs"></SettingConfigTableInfo>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Minus" @click="removeRow(scope.row)">
            移除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="text-[10px] text-[rgba(151,151,151,0.7)]">{{ desc }}</div>
  </div>
</template>

<script lang='ts' setup>
import { defineProps, watch, ref, nextTick } from 'vue';
import SettingConfigInfo from './SettingConfigInfo.vue';
import SettingConfigInputInfo from './SettingConfigInputInfo.vue';
import { Plus, Minus } from "@element-plus/icons-vue";

const emits = defineEmits(['update:tableData'])
const props = defineProps({
  tableData: null,//props.datas[item.field]
  columnChilds: null,//item.childs
  desc: null
})
const changeValues = ref()
watch(() => props.tableData, () => {
  if (props.tableData) {
    changeValues.value = props.tableData
  } else {
    changeValues.value = []
  }
}, {
  immediate: true
})
watch(() => JSON.parse(JSON.stringify(changeValues.value)), (value, oldValue) => {
  if (oldValue != undefined) {
    const changedIndex = value.findIndex((obj: any, index: number) => JSON.stringify(obj) !== JSON.stringify(oldValue[index]));
    const ids = oldValue.map((obj: any) => obj.AliasCode).sort((a: number, b: number) => b - a);
    const maxId = ids.length > 0 ? ids[0] : 0;
    if (value.length < oldValue.length) { } else if (changedIndex !== -1 && value[changedIndex].AliasCode == undefined) {
      changeValues.value[changedIndex].AliasCode = maxId + 1;
    } else {
      if (oldValue[changedIndex] != undefined && changeValues.value[changedIndex].AliasCode != oldValue[changedIndex].AliasCode) {
        const oldAliasCodes = oldValue.map((obj: any) => obj.AliasCode);
        if (oldAliasCodes.includes(changeValues.value[changedIndex].AliasCode)) {
          if (changeValues.value[changedIndex].AliasCode < oldValue[changedIndex].AliasCode) {
            changeValues.value[changedIndex].AliasCode = changeValues.value[changedIndex].AliasCode - 1;
          } else {
            changeValues.value[changedIndex].AliasCode = changeValues.value[changedIndex].AliasCode + 1;
          }
        }
      }
    }
  }
  console.log(changeValues.value)
  emits('update:tableData', changeValues.value)
}, {
  immediate: true,
  deep: true

})
const addRow = () => {
  changeValues.value.push({})
}
const removeRow = (row: any) => {
  changeValues.value.splice(changeValues.value.indexOf(row), 1)
}
</script>

<style lang='scss' scoped></style>
